<template>
    <div class="sideNav" :style="{ width: leftNav ? width + 'px' : '60px' }">
        <div class="leftNav">
            <!-- 展开与折叠按钮 -->
            <div v-if="props.foldButton" class="button nav" @click="leftNav = !leftNav; console.log(props.menuList)">
                <span :class="{ expand: left ? leftNav : !leftNav, collapse: left ? !leftNav : leftNav }"
                class="iconfont icon-likesprogramdaohangshouqi_moren"></span>
            </div>
            <div v-for="(item, index) in props.menuList" class="button"
            :class="{ select: thisSelected === index }" @click="
                thisSelected = index;
                leftNav = true;
                item.onClick && item.onClick();
            " 
            :key="index">
                <div class="newMessage" v-if="item.newMessage && thisSelected !== index"></div>
                <span class="iconfont" :class="item.iconName"></span>
                <span class="title">{{ item.titleText }}</span>
            </div>
        </div>
        <div class="sideNavContentsBox">
            <div class="sideNavTitle">
                <slot name="title"></slot>
            </div>
            <div class="sideNavContents">
                <template v-for="(item, index) in props.menuList" :key="index">
                    <slot v-if="(item.slotName && item.slotName.length > 0) 
                    && (index === thisSelected)" :name="item.slotName"></slot>
                </template>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
export default defineComponent({
    name: 'sideNav',
});
export interface SideNavMenu {
    iconName: string;
    titleText: string;
    slotName?: string;
    newMessage?: boolean;
    onClick?: () => void;
}

</script>
<script setup lang="ts">
    const props = withDefaults(defineProps<{
        defaultMenu?: number,
        foldButton?: boolean;
        width?: number;
        fold?: boolean;
        left?: boolean;
        menuList?: SideNavMenu[];
    }>(), {
        defaultMenu: 0,
        foldButton: true,
        width: 290,
        fold: false,
        left: true,
        menuList: () => []
    });

    // 当前聊天
    const thisSelected = ref(-1);

    // 导航栏展开/折叠
    const leftNav = ref(!props.fold);

    // 展开与折叠
    const foldAndExpand = (fold: boolean) => {
        if (fold) leftNav.value = false;
        else leftNav.value = true;
    }
    // 折叠
    const fold = () => {
        foldAndExpand(true);
    }
    // 展开
    const expand = () => {
        foldAndExpand(false);
    }

    // 设置选择
    const selected = (index: number) => {
        console.log("设置选项：" + index);
        if (index >= 0 && props.menuList.length > index) {
            thisSelected.value = index;
            do
            {
                if (props.menuList[thisSelected.value].slotName && props.menuList[thisSelected.value].slotName.length > 0) {
                    break;
                } else {
                    thisSelected.value++;
                }
                if (thisSelected.value >= props.menuList.length) {
                    thisSelected.value = 0;
                }
                if(thisSelected.value == index)
                {
                    thisSelected.value = -1;
                    break;
                }
            } while (true);
        }
    }

    onMounted(() => {
        selected(props.defaultMenu);
    });

    // 导出方法
    defineExpose({
        foldAndExpand,
        fold,
        expand,
        selected
    });

</script>


<style src="@/assets/icons/iconfont.css" scoped></style>
<style scoped>
/* 导航栏 */
.sideNav {
    height: 100%;
    display: flex;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
    --transition-duration: 0.2s; /* 定义默认值 */
    transition: width var(--transition-duration);
}
/* 左侧导航 */
.sideNav .leftNav {
    flex-shrink: 0;
    width: 60px;
    height: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(2rem);
    -webkit-backdrop-filter: blur(2rem);
    -moz-backdrop-filter: blur(2rem);
    -ms-backdrop-filter: blur(2rem);
}
/* 导航按钮 */
.sideNav .leftNav .button {
    width: 100%;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 5px;
    position: relative;
    transition: all .3s;
}
.sideNav .leftNav .button.nav {
    width: 45px;
    height: 45px;
    margin-top: 10px;
    margin-bottom: 10px;
}
/* 旋转 180 → 360° */
@keyframes rotateExpand {
  from { transform: rotate(180deg); }
  to { transform: rotate(360deg); }
}
/* 旋转 0 → 180° */
@keyframes rotateCollapse {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}
/* 添加动画 */
.sideNav .leftNav .button.nav .expand {
  animation: rotateExpand var(--transition-duration) ease-in-out forwards;
}
.sideNav .leftNav .button.nav .collapse {
  animation: rotateCollapse var(--transition-duration) ease-in-out forwards;
}
.sideNav .leftNav .button.select {
    background-color: rgba(200, 200, 255, .2);
    color: rgba(65, 185, 255, 1);
}
.sideNav .leftNav .button:hover {
    background-color: rgba(200, 200, 255, .2);
    color: rgba(65, 185, 255, 1);
}
.sideNav .leftNav .button:active {
    background-color: rgba(200, 200, 255, .3);
    transition: all .1s;
}
.sideNav .leftNav .button .newMessage {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 0, 0, 1);
    top: 4px;
    right: 4px;

}
.sideNav .leftNav .button .iconfont {
    font-size: 28px;
    height: 28px;
    overflow: hidden;
    /* 将旋转轴移动到中心 */
    transform-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sideNav .leftNav .button .title {
    width: 100%;
    font-size: 12px;
    text-align: center;
    /* 单行溢出省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 导航内容 */
.sideNav .sideNavContentsBox {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0; /* 添加这一行 */
}
.sideNav .sideNavContentsBox .sideNavTitle {
    width: 100%;
    flex-shrink: 0;
}
.sideNav .sideNavContentsBox .sideNavContents {
    width: 100%;
    flex: 1;
    min-height: 0; /* 关键设置 */
    /* overflow-y: auto; */
}
</style>